<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理页面</title>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <link href="../lib/layui/css/layui.css">
</head>

<body>
    <div id="app">
        <form class="layui-form" action="">

            <div class="layui-form-item">
                <!--名称 -->
                <div class="layui-inline">
                    <label class="layui-form-label">员工名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" autocomplete="off" class="layui-input" disabled>
                    </div>
                </div>

                <!-- 员工性别 -->
                <div class="layui-inline">
                    <label class="layui-form-label">员工性别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="gender" value="男" title="男" checked="">
                        <input type="radio" name="gender" value="女" title="女">
                    </div>
                </div>
                <!-- 出生日期 -->
                <div class="layui-inline">
                    <label class="layui-form-label">出生日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="birthday" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- 身份证号 -->
                <div class="layui-inline">
                    <label class="layui-form-label">身份证号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="idcard" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <!-- 员工民族 -->
                <div class="layui-inline">
                    <label class="layui-form-label">员工民族</label>
                    <div class="layui-input-block">
                        <select name="nationid" lay-filter="nation">
                            <option :value="item.id" v-for="item in nationList" v-html="item.name"></option>
                        </select>
                    </div>
                </div>
                <!-- 婚姻状态 -->
                <div class="layui-inline">
                    <label class="layui-form-label">婚姻状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="wedlock" value="已婚" title="已婚">
                        <input type="radio" name="wedlock" value="未婚" title="未婚">
                        <input type="radio" name="wedlock" value="离异" title="离异">
                    </div>
                </div>
                <!-- 用户籍贯 -->
                <div class="layui-inline">
                    <label class="layui-form-label">用户籍贯</label>
                    <div class="layui-input-inline">
                        <input type="text" name="nativeplace" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- 政治面貌 -->
                <div class="layui-inline">
                    <label class="layui-form-label">政治面貌</label>
                    <div class="layui-input-block">
                        <select name="politicid" lay-filter="politic">
                            <option :value="item.id" v-for="item in politicsList" v-html="item.name"></option>
                        </select>
                    </div>
                </div>
                <!-- 员工邮箱 -->
                <div class="layui-inline">
                    <label class="layui-form-label">员工邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" :value="employee.email" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- 验证手机 -->
                <div class="layui-inline">
                    <label class="layui-form-label">验证手机</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- 居住地址 -->
                <div class="layui-inline">
                    <label class="layui-form-label">居住地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="address" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- 员工部门 -->
                <div class="layui-inline">
                    <label class="layui-form-label">员工部门</label>
                    <div class="layui-input-block">
                        <select name="departmentid" lay-filter="department">
                            <option :value="item.id" v-for="item in departmentList" v-html="item.name"></option>
                        </select>
                    </div>
                </div>
                <!-- 员工职称 -->
                <div class="layui-inline">
                    <label class="layui-form-label">员工职称</label>
                    <div class="layui-input-block">
                        <select name="joblevelid" lay-filter="joblevel">
                            <option :value="item.id" v-for="item in joblevelList" v-html="item.name"></option>


                        </select>
                    </div>
                </div>
                <!-- 员工职位 -->
                <div class="layui-inline">
                    <label class="layui-form-label">员工职位</label>
                    <div class="layui-input-block">
                        <select name="posid" lay-filter="pos">
                            <option :value="item.id" v-for="item in positionList" v-html="item.name"></option>
                   

                        </select>
                    </div>
                </div>
                <!-- 聘用方式 -->
                <div class="layui-inline">
                    <label class="layui-form-label">聘用方式</label>
                    <div class="layui-input-inline">
                        <input type="text" name="engageform" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- 最高学位 -->
                <div class="layui-inline">
                    <label class="layui-form-label">最高学位</label>
                    <div class="layui-input-block">
                        <select name="tiptopdegree" lay-filter="tiptopdegree"> 
                            <option value="博士">博士</option>
                            <option value="硕士">硕士</option>
                            <option value="学士">学士</option>
                            <option value="本科">本科</option>
                            <option value="专科">专科</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">专业名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="specialty" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">毕业院校</label>
                    <div class="layui-input-inline">
                        <input type="text" name="school" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">在职状态</label>
                    <div class="layui-input-block">
                        <select name="workstate" lay-filter="workstate">
                            <option value="在职" selected>在职</option>
                            <option value="离职">离职</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">员工工号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="workid" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">合同期限</label>
                    <div class="layui-input-inline">
                        <input type="number" name="contractterm" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">员工工龄</label>
                    <div class="layui-input-inline">
                        <input type="number" name="workage" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">入职日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="begindate" id="begindate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">转正日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="conversiontime" id="conversiontime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">离职日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="notworkdate" id="notworkdate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">合同起始日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="begincontract" id="begincontract" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">合同终止日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="endcontract" id="endcontract" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
        </form>

    </div>
    <script src="../js/jquery.min.js"></script>
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../js/vue.js"></script>
    <script>
        layui.use(['form', 'laydate'], function() {
            let form = layui.form, //初始化
                laydate = layui.laydate;
            laydate.render({
                elem: '#date'
            });
            laydate.render({
                elem: '#begindate'
            });
            laydate.render({
                elem: '#conversiontime'
            });
            laydate.render({
                elem: '#notworkdate'
            });
            laydate.render({
                elem: '#begincontract'
            });
            laydate.render({
                elem: '#endcontract'
            });

            const app = new Vue({
                el: "#app",
                data: {
                    employee: null,
                    departmentList: null,
                    joblevelList: null,
                    nationList: null,
                    politicsList: null,
                    positionList: null,
                    id: ""
                },
                created() {
                    let id = $("#ids").val();
                    this.id = id;
                    //发送请求
                    axios.get("http://localhost:5267/employees/" + id)
                        .then((res) => {
                            this.employee = res.data.data.employee
                            this.departmentList = res.data.data.departmentList
                            this.joblevelList = res.data.data.joblevelList
                            this.nationList = res.data.data.nationList
                            this.politicsList = res.data.data.politicsList
                            this.positionList = res.data.data.positionList
                            console.log(this.employee.tiptopdegree);
                        })
                },
                updated() {
                    layui.use("form", () => {
                        form.render();
                    })
                }
            })

            form.on('submit(submit)', function(data) {
                axios.put("http://localhost:5267/employees", data.field).then((res) => {
                    if (res.data.code == 200) {
                        layui.msg("修改成功", {
                            time: 2000,
                            icon: 1
                        }, () => {
                            form.render();
                        })
                    } else {
                        layui.msg("操作异常", {
                            time: 2000,
                            icon: 2
                        }, () => {
                            form.render();
                        })
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

        })
    </script>
</body>

</html>